<template>
  <div class="content_padding">
		<div class="container" style="position: fixed; top: 0;left: 0;">
      <span class="staffTitle">{{ staffTitle }}</span>
    </div>

		<div class="device_info">
			<template>
				<div class="basic_info">
					<div class="info_box">
						<span class="txt"><span class="ele">*</span>物料名称：</span>
						<el-input v-model="materialPlanInfo.name" size="medium" class="input_width" clearable placeholder="请输入"></el-input>
					</div>
					<div class="info_box">
						<span class="txt"><span class="ele">*</span>物料ID：</span>
						<el-input v-model="materialPlanInfo.materialId" size="medium" class="input_width" clearable placeholder="请输入"></el-input>
					</div>
					<div class="info_box">
						<span class="txt">属性：</span>
						<el-input v-model="materialPlanInfo.property" size="medium" class="input_width" clearable placeholder="请输入"></el-input>
					</div>
					<div class="info_box">
						<span class="txt"><span class="ele">*</span>用料周期：</span>
						<el-date-picker
							v-model="planPeriod"
							class="input_width"
              size="medium"
							type="daterange"
							value-format="yyyy-MM-dd"
							range-separator="至"
							start-placeholder="开始时间"
							end-placeholder="结束时间"
							@change="chooseTimeRange"
						></el-date-picker>
					</div>
				</div>

				<div class="car-info-box">
					<div class="info_box info-flex">
						<span class="txt"><span class="ele">*</span>车辆信息：</span>
						<el-input
							v-model="carNum"
              size="medium"
							style="width:170px; margin:0 14px 0 6px;"
							clearable
							placeholder="车牌号"
							@input="blurCarNumInfo"
							@clear="clearCarNumInfo">
						</el-input>
						<el-input
							v-model="carUnit"
              size="medium"
							style="width:250px; margin-right: 14px;"
							clearable
							placeholder="所属单位"
							@input="blurCarUnitInfo"
							@clear="clearCarUnitInfo">
						</el-input>
						<el-input
							v-model="carDuty"
              size="medium"
							style="width:170px; margin-right: 14px;"
							clearable
							placeholder="负责人"
							@input="blurCarDutyInfo"
							@clear="clearCarDutyInfo">
						</el-input>
						<el-button type="primary" size="mini" circle
							icon="el-icon-plus"
							:disabled="addDisabled" @click="addCarInfo" />
					</div>
					<div class="car-info" v-for="(item, index) in vehicleList" :key="index">
						<span style="width: 170px;">{{ item.numberPlate }}</span>
						<span style="width: 250px;">{{ item.vehicleInfo }}</span>
						<span style="width: 170px;">{{ item.name }}</span>
						<el-button type="danger" size="mini" circle icon="el-icon-minus" @click="delCarInfo(item.id, index)" />
					</div>
				</div>

				<div class="basic_info">
					<div class="info_box">
						<span class="txt"><span class="ele">*</span>用料总量：</span>
						<el-input v-model="materialPlanInfo.total" size="medium" class="input_width" clearable placeholder="请输入"></el-input>
					</div>
					<div class="info_box">
						<span class="txt"><span class="ele">*</span>计数单位：</span>
						<el-select v-model="materialPlanInfo.unit" size="medium" class="input_width" clearable placeholder="请选择" @change="onTallyChange">
							<el-option
								v-for="item in countingUnit"
								:key="item.id"
								:label="item.name"
								:value="item.id">
							</el-option>
						</el-select>
					</div>
					<div class="info_box">
						<span class="txt"><span class="ele">*</span>设备类型：</span>
						<el-select
							v-model="materialPlanInfo.deviceType"
							class="input_width"
              size="medium"
							clearable
							placeholder="请选择"
							@change="onDeviceTypeChange">
							<el-option
								v-for="item in devicetype"
								:key="item.id"
								:label="item.name"
								:value="item.id">
							</el-option>
						</el-select>
					</div>
					<div class="info_box">
						<span class="txt"><span class="ele">*</span>设备名称：</span>
						<el-select
							v-model="materialPlanInfo.deviceId"
              size="medium"
							class="input_width"
							clearable
							:disabled="disabled"
							placeholder="请选择">
							<el-option
								v-for="item in deviceName"
								:key="item.id"
								:label="item.name"
								:value="item.id">
							</el-option>
						</el-select>
					</div>
				</div>

				<div>
					<div class="alarm-box" style="margin-top: 12px;">
						<span class="alarm-text"><span class="ele">*</span>是否报警</span>
						<el-switch v-model="materialPlanInfo.alarm" active-color="#13ce66" :width="34.5" @change="alarmSwitchChange"></el-switch>
						<el-tooltip class="item" effect="dark" content="开启后会把告警信息推送给所选推送人！" placement="top">
							<i class="iconfont iconwenhao"></i>
						</el-tooltip>
					</div>
					<div class="alarm-box">
						<span class="alarm-text">已达预计总量提醒</span>
						<el-switch
							v-model="materialPlanInfo.reachedRemind"
							active-color="#13ce66"
							:disabled="reachAlarm"
							:width="34.5"
							@change="alarmSwitchChange">
						</el-switch>
						<el-tooltip class="item" effect="dark" content="已达预计总量提醒以用料数量发出提醒！" placement="top">
							<i class="iconfont iconwenhao"></i>
						</el-tooltip>
					</div>
					<div class="alarm-box">
						<span class="alarm-text">超出预计总量提醒</span>
						<el-switch
							v-model="materialPlanInfo.beyondRemind"
							active-color="#13ce66"
							:disabled="exceedAlarm"
							:width="34.5"
							@change="alarmSwitchChange">
						</el-switch>
						<el-tooltip class="item" effect="dark" content="超出预计总量提醒以用料数量，如果发出即向指定推送人发出提醒！" placement="top">
							<i class="iconfont iconwenhao"></i>
						</el-tooltip>
					</div>
					<div class="info_box info-flex">
						<span class="txt" style="margin-right: 6px;"><span class="ele" v-if="materialPlanInfo.alarm">*</span>推送人：</span>
						<el-select v-model="materialPlanInfo.userId" size="medium" class="input_width" clearable placeholder="请选择">
							<el-option
								v-for="item in remindUser"
								:key="item.id"
								:label="item.name"
								:value="item.id">
							</el-option>
						</el-select>
					</div>
				</div>
			</template>
		</div>

		<div class="wire"></div>
		<div slot="footer" class="dialog_footer">
			<el-button class="but_width" @click="returnPreviousPage">返回</el-button>
			<el-button class="but_width" type="primary" @click="confirmModifData">提交</el-button>
		</div>
	</div>
</template>

<script>
import HttpInterface from "../../util/httpInterface";
import HttpConfig from "../../util/httpConfig";

export default {
  components: {},
  data() {
		return {
			staffTitle: "添加用料计划信息",
			devicetype: [
				{
					id : 1,
					name: "监控"
				},
				{
					id : 2,
					name: "地磅"
				}
			],
			deviceName: [
				{
					id : 1,
					name: "设备一"
				},
				{
					id : 2,
					name: "设备二"
				}
			],
			countingUnit: [
				{
					id : 1,
					name: "吨"
				},
				{
					id : 2,
					name: "kg"
				},
			],
			remindUser: [],
			materialPlanInfo: {
				name: "",
				materialId: "",
				property: "",
				total: "",
				unit: "",
				deviceType: "",
				deviceId: "",
				userId: "",
				alarm: true,
				reachedRemind: false,
				beyondRemind: false
			},
			vehicleList: [],
			planPeriod: [],
			carNum: "",
			carUnit: "",
			carDuty: "",
			disabled: true,
			reachAlarm: false,
			exceedAlarm: false,
			addDisabled: true,
		};
	},

  methods: {
		// 时间选择
    chooseTimeRange() {
      console.log(this.planPeriod);
		},

		// 车牌号
		blurCarNumInfo() {
			var carNum = this.carNum;
			var carUnit = this.carUnit;
			var carDuty = this.carDuty;
			if (carNum != "" && carUnit != "" && carDuty != "") {
				this.addDisabled = false;
			}
		},

		// 车牌号清空
		clearCarNumInfo() {
			this.carNum = "";
			this.addDisabled = true;
		},

		// 所属单位
		blurCarUnitInfo() {
			var carNum = this.carNum;
			var carUnit = this.carUnit;
			var carDuty = this.carDuty;
			if (carNum != "" && carUnit != "" && carDuty != "") {
				this.addDisabled = false;
			}
		},

		// 所属单位清空
		clearCarUnitInfo() {
			this.carUnit = "";
			this.addDisabled = true;
		},

		// 负责人
		blurCarDutyInfo() {
			var carNum = this.carNum;
			var carUnit = this.carUnit;
			var carDuty = this.carDuty;
			if (carNum != "" && carUnit != "" && carDuty != "") {
				this.addDisabled = false;
			}
		},

		// 负责人清空
		clearCarDutyInfo() {
			this.carDuty = "";
			this.addDisabled = true;
		},

		// 添加车辆信息
		addCarInfo () {
			var carNum = this.carNum;
			var carUnit = this.carUnit;
			var carDuty = this.carDuty;
			var vehicleList = this.vehicleList;
			if (carNum != "" && carUnit != "" && carDuty != "") {
				vehicleList.push({
					numberPlate: carNum,
					vehicleInfo: carUnit,
					name: carDuty
				})
				this.carNum = "";
				this.carUnit = "";
				this.carDuty = "";
				return true;
			} else {
				this.warningMessage("请输入车辆信息！");
				return false;
			}
		},

		// 删除车辆信息
		delCarInfo (carId, index) {
			var vehicleList = this.vehicleList;
			var id = this.materialPlanInfo.id;
			if (id == undefined || vehicleList.id == undefined) {
				vehicleList.splice(index, 1);
			} else {
				this.delPlanCarInfo(carId, function (id) {
					vehicleList.forEach((item, index) => {
						if ( id == item.id ) {
							vehicleList.splice(index, 1);
							throw Error();
						}
					});
				});
			}
		},

		delPlanCarInfo (id, callback) {
			var _this = this;
			var params = {
				id : id
			}
			HttpInterface.requestPost(this, HttpInterface.URL_MV_DEL, params, function (res) {
				var data = res.data;
				if (data.success) {
					_this.successMessage("成功删除车辆信息！");
					callback(id);
				}
			}, null, false)
		},

		// 计数单位
	  onTallyChange() {
		  console.log(this.materialPlanInfo.unit);
		},

		// 设备类型
		onDeviceTypeChange () {
			var deviceType = this.materialPlanInfo.deviceType;
			if (deviceType != "") {
				this.disabled = false;
			} else {
				this.disabled = true;
				this.materialPlanInfo.deviceId = "";
			}
		},

		// 是否报警
		alarmSwitchChange() {
			var alarm = this.materialPlanInfo.alarm
			if (alarm) {
				this.reachAlarm = false;
				this.exceedAlarm = false;
			} else {
				this.materialPlanInfo.reachedRemind = false;
				this.materialPlanInfo.beyondRemind = false;
				this.reachAlarm = true;
				this.exceedAlarm = true;
			}
		},

		refresh (id) {
			if (id != 0) {
				this.staffTitle = "编辑用料计划信息";
				this.getStaffDetail(id);
			}
			this.getUserList();
		},

		getUserList() {
			var _this = this;
			HttpInterface.requestGet(this, HttpInterface.URL_DUTYUSER_GET_ALL, {}, function (response) {
				var data = response.data;
				data.forEach((item, index) => {
					_this.remindUser.push({
						id: item.userid,
						name: item.fullname
					})
				});
			}, null)
		},

		// 查询 计划详情信息
	  getStaffDetail (id) {
      this.staffTitle = "编辑用料计划信息";
		  var _this = this;
		  var params = {
			  id: id
		  };
		  HttpInterface.requestPost(this, HttpInterface.URL_MATERIAL_GET, params, function (response) {
				var data = response.data;
			  if (data.success) {
					var content = data.other.material;
					content.unit = Number(content.unit);
					content.alarm = content.alarm == 1 ? true : false;
					content.reachedRemind = content.reachedRemind == 1 ? true : false;
					content.beyondRemind = content.beyondRemind == 1 ? true : false;
					if (content.deviceType != "") {
						content.deviceType = Number(content.deviceType);
						_this.disabled = false;
					}
					_this.materialPlanInfo = content;
					_this.planPeriod.push(content.startDate)
					_this.planPeriod.push(content.endDate)
					_this.vehicleList = data.other.vehicleList;
			  }
		  }, function (e) {

		  }, false);
		},

		// 返回按钮
		returnPreviousPage () {
			this.$parent.resetPresentPage();
		},

	  checkStaffInfo: function () {
			var info = this.materialPlanInfo;
		  if (info.name == "") {
			  this.warningMessage("请输入物料名称！");
			  return false;
		  }
		  if (info.materialId == "") {
			  this.warningMessage("请输入物料ID！");
			  return false;
			}
			if (this.planPeriod == "" || this.planPeriod == null) {
			  this.warningMessage("请选择用料周期！");
			  return false;
			}
			if (this.vehicleList.length <= 0) {
				this.warningMessage("请添加车辆信息！");
			  return false;
			}
			if (info.total == "") {
			  this.warningMessage("请输入用料总量！");
			  return false;
			}
			if (info.unit == "") {
			  this.warningMessage("请选择计数单位！");
			  return false;
			}
			if (info.deviceType == "") {
			  this.warningMessage("请选择设备类型！");
			  return false;
			}
			if (info.deviceId == "") {
			  this.warningMessage("请选择设备名称！");
			  return false;
			}
			if (info.alarm) {
				if (info.userId == "") {
					this.warningMessage("请选择推送人！");
					return false;
				}
			}
		  return true;
		},

		// 提交
	  confirmModifData() {
		  if (this.checkStaffInfo()) {
				this.addPlanInfo();
		  }
		},

	  addPlanInfo: function () {
			var _this = this;
			var info = this.materialPlanInfo;
			var params = {
				material: info,
				vehicleList: this.vehicleList
			};
			var planPeriod = this.planPeriod;
			if (info.id != undefined) {
				params.material.id = info.id;
			}
			if (planPeriod != "" || planPeriod != null) {
				params.material.startDate = planPeriod[0];
				params.material.endDate = planPeriod[1];
			}
			params.material.deviceType = info.deviceType.toString();
			params.material.alarm = info.alarm ? 1 : 2;
			params.material.reachedRemind = info.reachedRemind ? 1 : 2;
			params.material.beyondRemind = info.beyondRemind ? 1 : 2;
			var url = info.id == undefined ? HttpInterface.URL_MATERIAL_ADD : HttpInterface.URL_MATERIAL_EDIT;
		  HttpInterface.requestPost(this, url, params, function (response) {
				var data = response.data;
			  var success = data.success;
			  if (success) {
					_this.successMessage("操作成功！");
					_this.$parent.resetPresentPage();
				} else {
					_this.successMessage(data.msg);
				}
		  }, null, false)
		}
	}
};
</script>

<style  scoped>
.device_info{
	margin-top: 40px;
	width: 80%;
	padding-left: 40px;
	box-sizing: border-box;
}

.staffTitle{
	font-size: 16px;
}

.content_padding{
	padding: 20px;
	box-sizing: border-box;
	margin-top: 20px;
	font-size: 14px;
	color: #333;
}

.basic_info{
	display: flex;
	flex-wrap: wrap;
}

.input_width{
	width: 260px;
}

.txt{
	font-size: 14px;
	width: 126px;
	display: inline-block;
	text-align: right;
}

.info_box{
	width: 500px;
	margin-top: 18px;
}

.info-flex{
	width: 100%;
	display: flex;
	align-items: center;
}

.car-info {
	font-size: 14px;
	color: rgb(114, 114, 114);
	margin-left: 132px;
}

.car-info span {
	display: inline-block;
	padding-left: 10px;
	line-height: 28px;
}

.car-info:nth-child(2){
	margin-top: 14px;
}

.wire {
	width: 100%;
	height: 1px;
	background: rgb(236, 236, 236);
	margin-top: 30px;
}

.iconwenhao{
	font-size: 18px;
	vertical-align: -3px;
	margin-left: 16px;
	color: #808080;
}

.alarm-box{
	width: 100%;
	height: 40px;
	display: flex;
	align-items: center;
}

.alarm-text{
	display: inline-block;
	width: 160px;
	margin-left: 56px;
}

/* 删除按钮 */
.el-button--danger{
	padding: 1.5px 2px !important;
	vertical-align: 2px
}

.el-button--danger >>> .el-icon-minus:before{
	font-size: 12px;
}

/* 添加按钮 */
.el-button--primary{
	padding: 5px !important;
}

.ele {
	color: rgb(247, 78, 78);
	margin-right: 5px;
}
</style>
